<template>
	<view class="loginContent">
		<view class="w-mask-zoom" :style="[zoomStyle]" v-if="!start"></view>
		<image class="bg_img" :src="basicData.defLoginPageImage"></image>
		<view class="login_container">
			<view class="logoItem">
				<image :src="basicData.logo"></image>
			</view>
			<block>
				<view>
					<view>
						<view class="item-list">
							<view class="name">{{$t('login.account')}}:</view>
							<view class="input-prepend">
								<input class="username" v-model="loginDetail.account" @input="placeholderFlag=false" :placeholder="$t('login.pleaseInputUsername')" />
							</view>
						</view>
						<view class="item-list">
							<view class="name">{{$t('login.password')}}:</view>
							<view class="input-prepend">
								<input class="username" :password="see_password" @input="placeholderFlag=false" type="text" v-model="loginDetail.pwd"
									:placeholder="$t('login.pleaseEnterpassword')" />
								<view @tap.stop="eye_click" class="input-password">
									<u-icon :name="see_password?'eye-off':'eye-fill'" size="36rpx"></u-icon>
								</view>
							</view>
						</view>
						<view class="item-list">
							<view class="name">{{$t('login.verificationCode')}}:</view>
							<view style="display: flex;">
								<view class="input-prepend">
									<input class="username" v-model="loginDetail.code" @input="placeholderFlag=false" :placeholder="$t('login.pleaseEnterVerificationCode')" />
								</view>
								<image :src="captchatImg" @click="getCaptcha()"
									style="width: 170rpx;height: 90rpx;margin-left: 20rpx;"></image>
							</view>
						</view>
						<view style="display: flex;align-items: center;height: 20px;margin:10rpx 0" v-if="placeholderFlag">
							<view class="name"></view>
							<view style="color: red;">{{$t(`login.${placeholderText}`)}}</view>
						</view>
					</view>
					<!-- 切换语言和记住密码————start -->
					<view class="group">
						<view><navigator url="../language_list/index">{{$t('publicLang.languageSwitch')}}</navigator></view>
						<view>
							<checkbox-group @change="rememberPWCheckboxChange" style="display: inline-block;">
								<label>
									<checkbox :checked="rememberPW" color="#00ce00" style="transform:scale(0.7)" />{{$t('login.savePassword')}}
								</label>
							</checkbox-group>
						</view>
					</view>
					<!-- 切换语言和记住密码————end -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="userPrivacy">
						<checkbox-group @change="readFalgCheckboxChange" style="display: inline-block;">
							<label>
								<checkbox :checked="readFalg" color="#00ce00" style="transform:scale(0.7)" />
							</label>
						</checkbox-group>
						<text @click="lookOver">我已阅读并同意"用户协议和隐私条款"</text>
					</view>
					<!-- #endif -->

					<view class="loginClass">
						<button type="primary" class="buttonCustom" @click="user_login">{{$t('login.signIn')}}</button>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		captchaApi,
		getLoginPicApi
	} from '@/api/api.js';
	import Routine from '@/libs/routine';
	import {mapGetters} from "vuex";
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				basicData: {
					logo:'',
					loginType: '',
				},
				bg_url: '',
				logo: '',
				loginDetail: {
					account: '',
					pwd: '',
					code: ''
				},
				captchatImg: '',
				adminId: '',

				see_password: true,
				save_password_checked: uni.getStorageSync('app_save_password') ? true : false,
				loading: true,
				placeholderText:'',  // 提示文字
				placeholderFlag:false,
				
				start:false,
				zoomStyle: {
					opacity: 1
				},
				rememberPW:false, // 记住密码
			}
		},
		onLoad(options) {
			if (this.isLogin){
				this.$store.dispatch('getInfo')
				uni.switchTab({
					url: '/pages/index/index'
				});
				return
			}else{
				uni.setNavigationBarTitle({
					title:this.$t('login.signIn')
				})
				this.zoomStyle.opacity = 0;
				this.start = true
			}
			var readFalg = uni.getStorageSync("readFalg")
			if (readFalg) {
				this.readFalg = true
			}
			console.info(options)
			if (uni.getStorageSync("Authorization") && options.id) {
				this.shareId = options.id
				this.dataInfo = options.dataInfo
				uni.reLaunch({
					url: "../classify/good_detail?id=" + this.shareId + '&dataInfo=' + encodeURIComponent(JSON
						.stringify(options.dataInfo))
				})
				return
			}
			var _this = this
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.login')
			});
		},
		onReady() {
			let username = uni.getStorageSync("loginUsername")
			let password = uni.getStorageSync("loginPwd")
			if (username && username !== '') {
				this.loginDetail.account = username
			}
			if (password) {
				this.rememberPW = true
				this.loginDetail.pwd = password
			}else{
				this.rememberPW = false
			}
		},
		mounted() {
			this.getInfo()
			if (this.loginDetail.account === '') {
				// this.$refs.account.focus()
			} else if (this.loginDetail.pwd === '') {
				// this.$refs.pwd.focus()
			}
			this.getCaptcha()
		},
		methods: {
			/** 密码是否显示*/
			eye_click() {
				this.see_password = !this.see_password
			},
			user_login() {
				let that = this
				if(!this.loginDetail.account){
					this.placeholderText = "accountCannotBeEmpty"
					this.placeholderFlag = true
					return
				}
				if(!this.loginDetail.pwd){
					this.placeholderText = "passwordCanNotBeBlank"
					this.placeholderFlag = true
					return
				}
				if(!this.loginDetail.code){
					this.placeholderText = "verificationCodeMustBeFilled"
					this.placeholderFlag = true
					return
				}
				if(this.loginDetail.pwd.length < 6){
					this.placeholderText = "passwordRestrictionsTips"
					this.placeholderFlag = true
					return
				}
				Routine.authUserInfo(this.loginDetail).then(resD => {
					if(that.rememberPW){
						uni.setStorageSync("loginUsername",this.loginDetail.account)
						uni.setStorageSync("loginPwd",this.loginDetail.pwd)
					}else{
						uni.setStorageSync("loginPwd","")
					}
					
					uni.switchTab({
						url: '/pages/index/index'
					});
				}).catch(e => {
					this.getCaptcha()
					uni.showToast({
						title: e,
						icon: "none"
					})
				})
			},
			getInfo() {
				var _this = this
				getLoginPicApi().then(res => {
					console.info(res, 123)
					_this.basicData.logo = res.data.logo
				})
			},
			getCaptcha() {
				var _this = this
				captchaApi().then((res) => {
					_this.captchatImg = res.data.code
					_this.loginDetail.key = res.data.key
				}).catch(({
					message
				}) => {
					uni.showToast({
						title: message,
						icon: "none"
					})
				})
			},
			rememberPWCheckboxChange(e){
				this.rememberPW = !this.rememberPW
			}
		}

	}
</script>

<style lang="scss">
	/* pages/login/login.wxss */
	.loginContent {
		overflow: hidden;
		position: relative;
		height: 100vh;
		background-color: #fff;
	}

	.bg_img {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		/* z-index: 0; */
	}


	.input-prepend {
		// border-radius: 50px;
		display: flex;
		align-items: center;
		border: 1px solid #c2c2c2;
		padding: 20rpx;
		font-size: 28rpx;
		// margin-left: 20rpx;
		flex: 1;
	}

	.input-image {
		width: 35rpx;
		height: 35rpx;
		color: #999;
		padding: 5rpx;
	}

	.input-password {
		color: #999;
		padding-left: 20rpx;
	}

	.username {
		margin-left: 10rpx;
		width: 100%;
	}



	.login_container {
		position: relative;
		margin-top: 100rpx;
		padding: 0 80rpx;
		overflow: hidden;
	}

	.logoItem {
		width: 100%;
		text-align: center;
		padding-bottom: 40rpx;
	}

	.logoItem image {
		width: 180rpx;
		height: 180rpx;
	}

	.item {
		text-align: center;
		padding-bottom: 10rpx;
		/* justify-self: center; */
		/* background-color: brown; */
	}

	.forget {
		color: #333;
	}

	.checkbox {
		transform: scale(0.7)
	}

	.loginClass {
		text-align: center;
		margin: 80rpx 0 0 0;
		overflow: hidden;
	}


	.buttonCustom {
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 0;
		font-size: 28rpx;
		background-color: #000000 !important;
	}

	.buttonCustom+.buttonCustom {
		margin-top: 20rpx;
	}

	.buttonCustom::after {
		border-radius: 100rpx;
	}

	.flex-sb {
		margin: 40rpx 0;
		display: flex;
		justify-content: space-between;
	}


	.secretFreeContent {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.secretFree_headImg {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.secretFreeContent .top {
		text-align: center;
		margin-bottom: 30rpx;
	}

	//ss
	.container {
		overflow: auto;
		padding: 0 80rpx;
		height: 100vh;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// padding: 140rpx 80rpx;
		// box-sizing: border-box;
	}

	.content {

		padding: 120rpx 0;
	}

	.inputBox {
		border-bottom: 1rpx solid #eeeeee;
		padding: 20rpx 0;
		width: 100%;
		box-sizing: border-box;
		margin: 10rpx 0;
	}

	.inputBox .tipTitle {
		margin-bottom: 10rpx;
	}

	.inputContent {
		display: flex;
		align-items: center;
	}

	.container .button {
		background-color: #18B566;
		color: #FFFFFF;
		width: 100%;
		padding: 20rpx;
		text-align: center;
		margin-top: 60rpx;
	}
	.group{
		display: flex;justify-content: space-between;margin-top: 20rpx;
	}
	.name {
		margin: 20rpx 0;
	}
	.w-mask-zoom{
		height: 100vh;background-color: #FFFFFF;width: 100%;position: fixed;z-index: 99999;
		transition: opacity .5s;
		opacity:1
		}
</style>
<style lang="scss">
	@import url("adaptation.css");
</style>
